<template>
    <div class="sindeMenu">
    <!-- :default-active="route.path" -->
        <el-menu :unique-opened="true"  active-text-color="#ffd04b" background-color="#fff"
        class="el-menu-vertical-demo" text-color="#fff">
        <SideBarItem v-for="item of menuList" :key="item.id"  :item="item"/>

        </el-menu> 
    </div>
</template>

<script setup>
import SideBarItem from './SideBarItem.vue'
import { ref,watch,onMounted,computed } from 'vue'
import { useRoute } from 'vue-router'
import { constantRoutes,asyncRoutes} from '../router'
import { usefromToStore } from '../stores/fromTo'

const menuList = ref([])

const store = usefromToStore()

console.log(store.getfrom)

menuList.value = asyncRoutes[0].children 


watch(
    () => store.fromTo, 
    (newValue) => {
    console.log('watch 已触发', newValue)
    if(newValue == '语音预警'){
        menuList.value = asyncRoutes[0].children 
    }else if(newValue == '雷达预警'){
        menuList.value = asyncRoutes[1].children 
    }else if(newValue == '烟雾预警'){
        menuList.value = asyncRoutes[2].children 
    }else if(newValue == '声音预警'){
        menuList.value = asyncRoutes[3].children 
    }
}) 


</script>

<style>
.sindeMenu{
    width: 100%;
    height: 100%;
}
.el-menu-vertical-demo{
    padding-top: 30px;
}
.el-menu{
    background-color: transparent;
    border-right: none;
}
</style>